<template>
  <!-- 组织架构 -->
  <div class="departments-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- 卡片头部（具名插槽） -->
        <div slot="header">
          <!-- 展示公司信息 -->
          <!-- 用一个行列布局 -->
          <el-row>
            <!-- 左边 -->
            <el-col :span="20">
              <span>{{ companyInfo.name }}</span>
            </el-col>
            <!-- 右边 -->
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{ companyInfo.manager }}</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <el-dropdown-menu slot="dropdown">
                      <!-- 向公司下添加部门 -->
                      <el-dropdown-item @click.native="addDept()">添加子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <!-- card body -->
        <!-- 卡片内容区域（默认插槽） -->
        <!-- 展示公司下的部门 -->
        <div>
          <el-tree
            :data="partsData"
            :props="defaultProps"
            default-expand-all
            @node-click="handleNodeClick"
          >
            <!-- 自定义部门树内容显示 -->
            <template #default="{ data }">
              <el-row style="width: 100%">
                <el-col :span="20">
                  <!-- 部门名字 -->
                  <span>{{ data.name }}</span>
                </el-col>
                <el-col :span="4">
                  <el-row type="flex" justify="end">
                    <!-- 两个内容 -->
                    <!-- 部门负责人 -->
                    <el-col>{{ data.manager }}</el-col>
                    <el-col>
                      <!-- 下拉菜单 element -->
                      <!-- 部门数据操作 -->
                      <el-dropdown>
                        <span> 操作<i class="el-icon-arrow-down" /> </span>
                        <!-- 下拉菜单 -->
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="addDept(data)">添加子部门</el-dropdown-item>
                          <el-dropdown-item @click.native="editDept(data)">编辑部门</el-dropdown-item>
                          <el-dropdown-item @click.native="delParts(data)">
                            删除部门
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-tree>
        </div>
      </el-card>
    </div>
    <!-- 新增/编辑弹出层 -->
    <AddDept
      :is-show-dialog.sync="isShowDialog"
      :current-data="currentData"
      :parts-data-all="partsDataAll"
      @update-tree="getParts"
    />
  </div>
</template>

<script>
// 导入部门数据接口
import { getDepartments, delDepartments } from '@/api/departments'
// 导入格式化树形数据的方法
import { formatTreeData } from '@/utils'

import AddDept from './components/add-dept'

export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    AddDept
  },
  data () {
    return {
      // 控制弹层显示
      isShowDialog: false,
      // 当前操作的部门数据
      currentData: null,
      // 部门数据（格式化的）
      partsData: [],
      // 没有格式化的所有部门数据
      partsDataAll: [],
      // 公司信息
      companyInfo: { name: '', manager: 'CEO' },
      // 自定义数据项的字段
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created () {
    this.getParts()
  },
  methods: {
    // 点击部门的节点触发
    /**
     * data 当前点击的部门数据
     */
    handleNodeClick (data) {
      console.log(data)
    },
    // 获取部门数据
    async getParts () {
      const parts = await getDepartments()
      console.log(parts)
      console.table(parts.depts)
      // 绑定公司信息
      this.companyInfo.name = parts.companyName
      // 绑定部门数据
      // this.partsData = parts.depts
      this.partsData = formatTreeData(parts.depts)
    },
    // 关闭弹层
    closeDialog () {
      this.isShowDialog = false
    },
    // 编辑部门
    editDept(data) {
      // 打开弹框
      this.isShowDialog = true
      // 记录一下当前点击的是谁 也就是要给谁添加子部门
      this.currentData = data
      // 通知子组件进行数据获取回显
      this.$refs.addDept.getDepartDetail(data.id)
    },
    // 新增部门
    // data 当前操作的部门数据
    addDept (data) {
      this.isShowDialog = true
      // 存储当前操作的部门数据
      this.currentData = data
    },
    // 删除部门
    // data 当前点击部门数据
    delParts (data) {
      console.log(data)
      this.$confirm('确认删除吗？', '提示').then(async () => {
        // 确定走到这里
        if (data.children && data.children.length) {
          return this.$message.error('不能直接删除父部门！')
        }
        // console.log('go')
        // 没有数据返回，不需要接收
        await delDepartments(data.id)
        // 删除成功后提示
        this.$message.success('删除成功！')
        // 刷新部门列表
        this.getParts()
      }).catch(() => {
        // 取消走到这里
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree-node__content {
  margin: 3px;
  font-size: 14px;
}
</style>
